<template>
	<view class="container">
		<hx-navbar title="我的苗店" :back="true" :fixed="true" :backgroundColor="[255, 255, 255]">
		</hx-navbar>
		<view class="">
			<view class="mian-top" @tap="hideModal">
				<view>
					<navigator url="../search/search" hover-class="none" style="display: flex;justify-content: center;background-color: #FFFFFF;">
						<view class="weui-cell__bd">
							<view class="cuIcon-search">
							</view>
							<input class="weui-input" name="input" placeholder-class="placeholder-input" placeholder="搜索商品" />
						</view>
					</navigator>
				</view>
			</view>
			<view class="main">
				<view class="flex shop-top justify-between">
					<view class="flex">
						<view class="shop-img">
							<image src="../../static/imgs/shop1.png" mode="aspectFit"></image>
						</view>
						<view class="shop-content">
							<view class="name">
								******
							</view>
							<view class="text-number text-sm">
								月销3456 商品470 关注254
							</view>
							<view class="address text-sm">
								<i class="fa fa-map-marker" aria-hidden="true"></i>******
							</view>
						<!-- 	<view class="bianqian flex">
								<text class="cu-tag line-red sm radius">国王会员</text>
								<text class="cu-tag line-yellow sm radius">企业认证</text>
								<text class="cu-tag line-blue sm radius">实名认证</text>
							</view> -->
						</view>
					</view>
					<view class="shop-button">
						<view class="">
							<i class="fa fa-phone" aria-hidden="true"></i>电话
						</view>
						<view class="">
							<i class="fa fa-commenting" aria-hidden="true"></i>客服
						</view>
					</view>
				</view>
				<view class="shop-top">
					<view class="gsjs">
						<text class="text-bold">公司介绍：</text>*********************************
						<text class="ckgd">查看更多 <text class="cuIcon-right"></text></text>
					</view>
				</view>
				<view class="paddings">
					<view class="" style="position: relative;">
						<view class="grid col-4 grid-square flex-sub">
							<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							 <image :src="imgList[index]" mode="aspectFill"></image>
								<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
									<text class='cuIcon-close'></text>
								</view>
							</view>
							<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
									<view class="text-center">
										<i class="fa fa-file-image-o" aria-hidden="true"></i>
									</view>
									<view class="text-center" style="font-size: 32rpx;color: #999999;">
										点击上传banner
									</view>
							</view>
						</view>
						<view class="swiperyy1">
							
						</view>
						<view class="swiperyy2">
							
						</view>
					</view>
				</view>
				<view class="">
					<view class="teb paddings flex justify-between align-center" style="border-bottom: 4rpx #F5F5F5 solid;">
						<view class="flex align-center">
							<view class="xz-text" :class="switchs?'':'active'" @tap="switchhs(0)">
								苗木供应
							</view>
							<view class="xz-text" :class="switchs?'active':''" @tap="switchhs(1)">
								基地果园
							</view>
						</view>
						<view class="bars">
							<i class="fa fa-bars" aria-hidden="true"></i>分类
						</view>
					</view>
					<!-- 苗木供应 -->
					<view class="empty">
						没发布相关产品~
					</view>
					<!-- <view class="flex product-main flex-wrap justify-between" v-show="!switchs">
						<view class="product">
							<navigator url="" hover-class="none">
							<view class="product-img">
								<image src="../../static/imgs/daym1.png" mode="aspectFit"></image>
								<view class="guankan">
									2562<i class="fa fa-eye" aria-hidden="true"></i>
								</view>
								<view class="product-bj"></view>
								<view class="product-bj2">
								</view>
							</view>
							 </navigator>
							<view class="text">
								<view class="name">
									五叶地锦杯苗
								</view>
								<view class="bingjia">
									<text>高度：500cm</text>
								</view>
								<view class="text-sm flex">
									<view class="">
										<text class="yhj"><text style="transform: scale(0.8);display: inline-block;position: relative;top: 5rpx;">￥</text>180</text>/株
									</view>
								</view>
							</view>
						</view>
						<view class="product">
							<navigator url="" hover-class="none">
							<view class="product-img">
								<image src="../../static/imgs/daym2.png" mode="aspectFit"></image>
								<view class="guankan">
									2562<i class="fa fa-eye" aria-hidden="true"></i>
								</view>
								<view class="product-bj"></view>
								<view class="product-bj2">
								</view>
							</view>
							 </navigator>
							<view class="text">
								<view class="name">
									五叶地锦杯苗
								</view>
								<view class="bingjia">
									<text>杆径：500~650cm</text>
								</view>
								<view class="text-sm flex">
									<view class="">
										<text class="yhj"><text style="transform: scale(0.8);display: inline-block;position: relative;top: 5rpx;">￥</text>1600</text>/株
									</view>
								</view>
							</view>
						</view>
					</view> -->
					<!-- 基地果园 -->
						<view class="flex product-main flex-wrap justify-between" v-show="switchs">
						
						<view class="product">
							<navigator url="" hover-class="none">
							<view class="product-img">
								<image src="../../static/imgs/datz1.png" mode="aspectFit"></image>
								<view class="product-bj"></view>
								<view class="product-bj2">
								</view>
							</view>
							 </navigator>
							<view class="text">
								<view class="name">
									正宗北京平谷大桃12个
								</view>
								<view class="text-sm cu-tag">
									脆甜桃子现摘现发
								</view>
								<view class="bingjia">
									<text>月售 456</text>
									<text>好评率90%</text>
								</view>
								<view class="text-sm flex align-end">
									<view class="yhj">￥112.6</view> <view class="yj">￥114</view>
								</view>
							</view>
							<view class="add">
								<view class="cuIcon-add"></view>
							</view>
						</view>
						<view class="product">
							<navigator url="" hover-class="none">
							<view class="product-img">
								<image src="../../static/imgs/datz1.png" mode="aspectFit"></image>
								<view class="product-bj"></view>
								<view class="product-bj2">
								</view>
							</view>
							 </navigator>
							<view class="text">
								<view class="name">
									正宗北京平谷大桃12个
								</view>
								<view class="text-sm cu-tag">
									脆甜桃子现摘现发
								</view>
								<view class="bingjia">
									<text>月售 456</text>
									<text>好评率90%</text>
								</view>
								<view class="text-sm flex align-end">
									<view class="yhj">￥112.6</view> <view class="yj">￥114</view>
								</view>
							</view>
							<view class="add">
								<view class="cuIcon-add"></view>
							</view>
						</view>
						<view class="product">
							 <navigator url="" hover-class="none">
							<view class="product-img">
								<image src="../../static/imgs/datz2.png" mode="aspectFit"></image>
								<view class="product-bj"></view>
								<view class="product-bj2">
								</view>
							</view>
							 </navigator>
							<view class="text">
								<view class="name">
									正宗北京平谷大桃12个
								</view>
								<view class="text-sm cu-tag">
									脆甜桃子现摘现发
								</view>
								<view class="bingjia">
									<text>月售 456</text>
									<text>好评率90%</text>
								</view>
								<view class="text-sm flex align-end">
									<view class="yhj">￥112.6</view> <view class="yj">￥114</view>
								</view>
							</view>
							<view class="add">
								<view class="cuIcon-add"></view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
import 'static/css/font-awesome.min.css';
export default {
	    data() {
	        return {
			   switchs:0,
			   imgList: [],
	        };
	    },
    methods:{
        switchhs(i){
            this.switchs=i;
        },
		ChooseImage() {
		    uni.chooseImage({
		        count: 4, //默认9
		        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
		        sourceType: ['album'], //从相册选择
		        success: (res) => {
		            if (this.imgList.length != 0) {
		                this.imgList = this.imgList.concat(res.tempFilePaths);
		            } else {
		                this.imgList = res.tempFilePaths;
		            }
		        }
		    });
		},
		ViewImage(e) {
		    uni.previewImage({
		        urls: this.imgList,
		        current: e.currentTarget.dataset.url
		    });
		},
		DelImg(e) {
		    uni.showModal({
		        title: '大佬',
		        content: '确定要删除这段吗？',
		        cancelText: '再看看',
		        confirmText: '再见',
		        success: res => {
		            if (res.confirm) {
		                this.imgList.splice(e.currentTarget.dataset.index, 1);
		            }
		        }
		    });
		},
    }
};
</script>

<style>
	.mian-top {
		width: 100%;
		height: 60rpx;
		z-index: 10;
		background-color: #FFFFFF;
	}

	.mian-top>view {
	}

	.weui-cell__bd {
		width: 94%;
		border-radius: 50rpx/50rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		border: #FFFFFF 1rpx solid;
		background-color: #F5F5F5;
		color: #CECDCD;
	}

	.weui-cell__bd .cuIcon-search {
		margin: 0 30rpx;
	}
	.placeholder-input {
		color: #CECDCD;
	}

	.weui-input {
		line-height: 60rpx;
		width: 85%;
		height: 60rpx;
		font-size: 24rpx;
		color: #CECDCD;
	}
	.main {}
	.shop-top {
		padding: 30rpx;
		border-bottom: 2rpx #F5F5F5 solid;
	}

	.shop-top image {
		width: 128rpx;
		height: 128rpx;
		border-radius: 15rpx;
	}
	.main .shop-content {
		padding: 0rpx 20rpx;

	}

	.main .shop-content .name {
		font-size: 36rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.address i{
		margin-right: 8rpx;
	}
	.shop-button view {
		width: 140rpx;
		height: 54rpx;
		border-radius: 15rpx;
		background-color: #F3635A;
		color: #FFFFFF;
		line-height: 54rpx;
		text-align: center;
		font-size: 30rpx;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}
	.shop-button view i{
		margin-right: 20rpx;
	}

	.shop-content .text-sm {
		color: #666;
	}

	.shop-content>view+view {
		margin-top: 10rpx;
	}
	.cu-tag.sm {
		position: relative;
		left: -8rpx;
		height: 40rpx;
		transform: scale(0.83);
	}
	.cu-tag+.cu-tag {
		margin-left: 0;
	}
	.line-blue {
		color: #22AFF8;
	}
	.gsjs {
		font-size: 24rpx;
		color: #666666;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		line-height: 36rpx;
		position: relative;
	}

	.gsjs .ckgd {
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: 1;
		color: #33DAA7;
		transform: scale(0.9);
	}
	.paddings{
		padding: 30rpx 40rpx;
	}
	.swiper{
		position: relative;
		z-index: 10;
	}
	.swiperyy1{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 6%;
		background-color:#E5E5E5 ;
		border-radius: 20rpx;
		z-index: 5;
	}
	.swiperyy2{
		width: 95%;
		height: 100%;
		position: absolute;
		top: 12%;
		background-color:#F5F5F5 ;
		border-radius: 20rpx;
		z-index: 3;
		left: 0;
		right: 0;
		margin: auto;
	}
	.teb{
		font-size: 26rpx;
		font-weight: bold;
	}
		
	.teb .xz-text{
		color: #202021;
		margin-right: 80rpx;
	}
	.teb .active{
		font-size: 36rpx;
		color: #33DAA7;
	}
	.bars{
		font-size: 26rpx;
		color: #999999;
	}
	.bars i{
		margin-right: 15rpx;
	}
	.product-main{
		margin: 30rpx 40rpx 0 20rpx;
	}
	.product{
		position: relative;
		margin-bottom: 30rpx;
	}
	
	.product .add{
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
		width: 44rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 50%;
		background-color: #26C594;
		color: #FFFFFF;
		text-align: center;
		font-size: 36rpx;
	}
	.product .guankan{
		width: 100rpx;
		height: 35rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 35rpx;
		font-size: 22rpx;
		background-color: rgba(255,255,255,0.7);
		position: absolute;
		right: 20rpx;
		bottom: 30rpx;
		z-index: 20;
	}
	.product .guankan i{
		margin-left: 5rpx;
	}
	.product-img{
		position: relative;
		width: 330rpx;
		height: 330rpx;
	}
	.product-img image{
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		position: relative;
		z-index: 4;
	}
	.product-bj{
		position: absolute;
		width: 94%;
		height: 94%;
		top: 3%;
		right: -3%;
		background-color: #E5E5E5;
		border-radius: 15rpx;
		z-index: 2;
	}
	.product-bj2{
		position: absolute;
		width: 88%;
		height: 88%;
		top: 6%;
		right: -6%;
		background-color: #F5F5F5;
		border-radius: 15rpx;
		z-index: 1;
	}
	.product .text{
		margin-top: 20rpx;
	}
	.product .name{
		font-size: 26rpx;
		font-weight: bold;
		color: #3F4440;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.product .text-sm{
		color: #999999;
	}
	.product .text-sm.cu-tag{
		position: relative;
		left: -8rpx;
		height: 40rpx;
		transform: scale(0.9);
		color: #666666;
		font-weight: bold;
		border-radius: 15rpx;
	}
	.product .bingjia text{
		font-size: 22rpx;
		color: #999999;
		margin-right: 20rpx;
	}
	.product .text-sm.flex.align-end{
		margin-top: 20rpx;
	}
	.product .text-sm .yhj{
		color: #FE522E;
		font-weight: bold;
	}
	.product .text-sm .yj{
		padding-top: 3rpx;
		transform: scale(0.9);
		text-decoration: line-through
	}
	.empty{
		width: 100%;
		text-align: center;
		color: #B5B5B5;
		font-size: 30rpx;
		padding-top: 100rpx;
	}
	
	/* 上传图片 */
	.grid{
		position: relative;
		z-index: 100;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}
	.solids::after{
		border: 10rpx #EDEDED dashed;
	}
	.grid.grid-square>uni-view{
		margin: 0;
	}
	.grid.col-4.grid-square>uni-view {
	    padding-bottom: 350rpx;
	    height: 0;
	    width: 700rpx;
	}
	.fa-file-image-o{
		color: #DDDDDD;
		font-size: 72rpx;
		margin-top: 90rpx;
		margin-bottom: 40rpx;
	}
</style>
